<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新品有戏后台管理</title>
    <link href="__CSS__/boot.css" rel="stylesheet">
    <link href="__STATIC__/layui/css/layui.css" rel="stylesheet">
    <script src="__JS__/jquery.js"></script>
    <script src="__JS__/layer/layer.js"></script>
    <script src="__STATIC__/layui/layui.js"></script>
    <script src="__JS__/vue.js"></script>
    <script src="__JS__/vue-resource.js"></script>
</head>
<body>
    {include file="base/header" /}
    <div id="box" style="width: 700px;margin: 0 auto;">
        <br/>
        <input type="hidden" v-model="sid" value="{$id}" name="sid"/>
        <div class="layui-form-item">
            <label class="layui-form-label">条形码:</label>
            <div class="layui-input-block">
                <input type="text" name="barcode" required  v-model="barcode" v-on:change="do" lay-verify="required" placeholder="请输入条形码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div>
            <div class="layui-form-item" >
                <label class="layui-form-label">邮费:</label>
                <div class="layui-input-block">
                    <input type="text"  required  v-model="postage"  lay-verify="required" placeholder="请输入邮费" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" >线上订单号:</label>
                <div class="layui-input-block">
                    <input type="text" required  v-model="onlineorder" lay-verify="required" placeholder="请输入线上订单号" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div id="add">
            <table class="layui-table">
                <colgroup>
                    <col width="150">
                    <col width="200">
                    <col>
                </colgroup>
                <tbody>
                <tr>
                    <td>产品名称</td>
                    <td ><input  style="border: 0px;" v-model="pname" type="text"></td>
                </tr>
                <tr>
                    <td>单价格</td>
                    <td ><input style="border: 0px;width: 40px" v-model="price" type="text">元</td>
                </tr>
                <tr>
                    <td>图片</td>
                    <td><img id="imgs" src="" width="100" height="100"  style="display: none"/></td>
                </tr>
                <tr>
                    <td>购买数量</td>
                    <td>
                        <button type="button" @click="plus(id)"  class="btn btn-primary  btn-xs">+</button>
                        <input v-model="number" style="width: 30px;border: 0px;" type="text" readonly>
                        <button type="button" @click="reduce(id)" class="btn btn-primary  btn-xs">-</button>
                    </td>
                </tr>
                <tr>
                    <td>总计</td>
                    <td><input type="text" v-model="totals" style="border: 0px;width: 40px"/>元</td>
                </tr>
                <tr>
                    <td colspan="2" align="center"><button @click="settlement" type="button" class="btn btn-info">结算</button></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
<script>
    total = [];
    new Vue({
        el:"#box",
        data:{
            id:'',
            sid:'',
            price:'',
            number:'',
            barcode:'',
            pname:'',
            subtotal:'',
            images:'',
            totals:'',
            postage:'',
            onlineorder:''
        },
        methods:{
            do:function () {
                this.$http.post("{:url('index/onlineorder/barcode')}",{
                    barcode:this.barcode
                },{
                    emulateJSON:true
                }).then(function (res) {
                    $("input[name='barcode']").val('');
                    if(!res.data){
                        layer.alert('商品不存在');
                        return;
                    }
                    //console.log(res.data.id);
                    if(ifArrVal(total,res.data.id)){
                        for(var i=0;i<total.length;i++){
                            if(contains(total[i],res.data.id)){
                                total[i][2] +=1;
                                total[i][5] += total[i][1];
                                this.number = total[i][2];
                                this.price = total[i][1];
                                $("#imgs").attr('src',"__ROOT__\\"+res.data.image);
                                this.panme = res.data.panme;
                                this.id = res.data.id;
                            }
                        }
                        this.compute();
                    }else {
                        var ls = [];
                        this.id = res.data.id;
                        this.price = res.data.retailprice;
                        this.number = 1;
                        this.barcode = res.data.barcode;
                        this.pname = res.data.pname;
                        this.subtotal = res.data.retailprice;
                        this.images = res.data.image;
                        $("#imgs").attr('src',"__ROOT__\\"+this.images);
                        $("#imgs").css('display','block');
                        ls.push(this.id);
                        ls.push(this.price);
                        ls.push(this.number);
                        ls.push(this.barcode);
                        ls.push(this.pname);
                        ls.push(this.subtotal);
                        ls.push(this.images);
                        total.push(ls);
                        console.log(total);
                        this.compute();
                    }
                });
            },
            plus:function (id) {
                if(ifArrVal(total,id)){
                    for(var i=0;i<total.length;i++){
                        if(contains(total[i],id)){
                            total[i][5] += total[i][1];
                            total[i][2] += 1;
                            this.number = total[i][2];
                            this.price = total[i][1];
                            //console.log(total[i]);
                        }
                    }
                }
                this.compute();
            },
            reduce:function (id) {
                if(ifArrVal(total,id)){
                    for(var i=0;i<total.length;i++){
                        if(total[i][2] == 1){
                            total[i][2] == 1;
                        }else{
                            total[i][2] -= 1;
                            total[i][5] -= total[i][1];
                            this.price = total[i][5];
                            this.number = total[i][2];
                        }
                    }
                }
                this.compute();
            },
            compute:function () {
                var counts = 0;
                for(var i=0;i<total.length;i++){
                    counts += total[i][5];
                }
                this.totals = counts;
            },
            settlement:function () {
                this.$http.post("{:url('index/onlineorder/settlement')}",{
                    and:arrayToJson(total),
                    sid:this.sid,
                    onlineorder:this.onlineorder,
                    postage:this.postage
                },{
                    emulateJSON:true
                }).then(function (res) {
                    if(res.data.success){
                        layer.msg(res.data.success,{icon:1,time:2000},function () {
                            window.location.reload();
                        });
                    }
                    if(res.data.error){
                        layer.alert(res.data.error);
                    }
                });
            }
        }
    });

    /**
     *  判断某个值是否在数组中
     */
    function contains(arr, obj) {
        //数组的长度
        var i = arr.length;
        while (i--) {
            if (arr[i] === obj) {
                //存在
                return true;
            }
        }
        //不存在
        return false;
    }
    /**
     * 判断某个数是否在多维数组中
     */
    function ifArrVal(arr,value){
        //多维数组判断是否存在某值
        for(var i = 0;i < arr.length;i++){
            //判断是否为多维数组
            if(arr[i] instanceof Array){
                if(jQuery.inArray( value, arr[i] )!=-1){
                    return true;
                }
            }
        }
        //不存在
        return false;
    }
    /**
     * 将二维数组转为 json 字符串
     */
    function arrayToJson(o) {
        var r = [];
        if (typeof o == "string") return "\"" + o.replace(/([\'\"\\])/g, "\\$1").replace(/(\n)/g, "\\n").replace(/(\r)/g, "\\r").replace(/(\t)/g, "\\t") + "\"";
        if (typeof o == "object") {
            if (!o.sort) {
                for (var i in o)
                    r.push(i + ":" + arrayToJson(o[i]));
                if (!!document.all && !/^\n?function\s*toString\(\)\s*\{\n?\s*\[native code\]\n?\s*\}\n?\s*$/.test(o.toString)) {
                    r.push("toString:" + o.toString.toString());
                }
                r = "{" + r.join() + "}";
            } else {
                for (var i = 0; i < o.length; i++) {
                    r.push(arrayToJson(o[i]));
                }
                r = "[" + r.join() + "]";
            }
            return r;
        }
        return o.toString();
    }
</script>
</html>